<template>
    <div class="big_box">
        <el-row :gutter="5">
            <el-form :model="selectfrom" ref="selectfrom_refs">
                <el-col :span="3">
                    <el-input placeholder="入库单编号" size="mini" v-model="selectfrom.InboundNumber"></el-input>
                </el-col>
                <el-col :span="3">
                    <el-input placeholder="物资名称" size="mini" v-model="selectfrom.DeviceName"></el-input>
                </el-col>
                <el-col :span="3">
                    <el-input placeholder="物品编号" size="mini" v-model="selectfrom.DeviceNumber"></el-input>
                </el-col>
                <el-col :span="3">
                    <el-date-picker style="width: 100%" placeholder="开始时间"
                                    type="date"
                                    size="mini"
                                    value-format="yyyy-MM-dd"
                                    v-model="selectfrom.Start"></el-date-picker>
                </el-col>
                <el-col :span="3">
                    <el-date-picker style="width: 100%" placeholder="结束时间"
                                    type="date"
                                    size="mini"
                                    value-format="yyyy-MM-dd"
                                    v-model="selectfrom.End"></el-date-picker>
                </el-col>
                <el-col :span="3">
                    <el-select placeholder="入库单状态" size="mini" v-model="selectfrom.State">
                        <el-option :value="0" label="全部"></el-option>
                        <el-option :value="1" label="待审批"></el-option>
                        <el-option :value="2" label="一级审批"></el-option>
                        <el-option :value="4" label="二级审批"></el-option>
                    </el-select>
                </el-col>
                <el-col :span="2.5">
                    <el-switch  inactive-text="我未审核" v-model="selectfrom.NoChecked"></el-switch>
                </el-col>
                <el-col :span="2">
                    <el-button type="success" icon="el-icon-search" size="mini" @click="formdata"></el-button>
                </el-col>
            </el-form>
        </el-row>
        <el-row>
            <el-col>

            </el-col>
        </el-row>
        <el-row style="padding:10px 0px">
            <el-col>
                <el-button-group>
                    <el-button class="buttongroup" type="danger" icon="el-icon-delete" @click="BatchDelete_event">批量删除</el-button>
                </el-button-group>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <el-table :data="tableData" border stripe style="width: 100%"  @selection-change="SelectionChange_event">
                    <el-table-column type="selection" width="40" align="center"></el-table-column>
                    <el-table-column fixed type="index" label="序号" width="50" align="center" :index="indexMethod"></el-table-column>
                    <el-table-column fixed prop="InboundNumber" label="编号" width="120" align="center"></el-table-column>
                    <el-table-column prop="OperatDate" label="入库日期" align="center"></el-table-column>
                    <el-table-column prop="State" label="状态" width="100" align="center">
                        <template slot-scope="slot">
                            <div v-show="slot.row.State==1" style="color: #909399">待审批</div>
                            <div v-show="slot.row.State==2" style="color: #409EFF">一级审批</div>
                            <div v-show="slot.row.State==4" style="color: #67C23A">二级审批</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="AuditUserId1" label="库管审批人" width="100" align="center">
                        <template slot-scope="slot">
                            {{ GetUserName(slot.row.AuditUserId1) }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="AuditTime1" label="库管审批日期"  align="center"></el-table-column>
                    <el-table-column prop="AuditUserId2" label="财务审批人" align="center">
                        <template slot-scope="slot">
                            {{ GetUserName(slot.row.AuditUserId2) }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="AuditTime2" label="财务审批日期"  align="center"></el-table-column>
                    <el-table-column fixed="right" label="操作" width="250" align="center">
                        <template slot-scope="scope">
                            <el-button type="warning" size="mini" >入库单</el-button>
                            <el-button type="info" size="mini" @click="InboundMaterialDetalis_show_event(scope.row)">查看</el-button>
                            <el-button type="danger" size="mini" @click="BatchDeleteOne_event(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
            <el-col :span="24">
                <div class="block">
                    <el-pagination
                            @size-change="formdata"
                            @current-change="formdata"
                            :current-page.sync="pagination.currentPage"
                            :page-sizes="pagination.pagesizes"
                            :page-size.sync="pagination.pagesize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total.sync="pagination.total">
                    </el-pagination>
                </div>
            </el-col>
        </el-row>

        <el-dialog cus :visible.sync="MaterialDetalis.dialog" :title="'入库单---'+MaterialDetalis.title" width="90%">
            <InboundMaterialDetalis :inbound-order-detalis="InboundOrderDetalis"></InboundMaterialDetalis>
        </el-dialog>
    </div>
</template>

<script>
    import InboundMaterialDetalis from "./InboundMaterialDetalis";

    export default {
        name: "StockInOrder",
        components: { InboundMaterialDetalis },
        props: {
            'InboundMaterialDetalis': InboundMaterialDetalis,
        },
        data() {
            return {
                //表格数据
                tableData: [],
                //分页数据绑定
                pagination: {
                    currentPage: 1,
                    pagesizes: [10, 20, 30, 40, 50],
                    pagesize: 10,
                    total: 100
                },
                //表格查询数据
                selectfrom: {
                    InboundNumber: '',
                    State: 0,
                    Start: '',
                    End: '',
                    DeviceName: '',
                    DeviceNumber: '',
                    NoChecked: false,
                },
                //表格多选数据数组
                SelectMore_lis: [],
                //入库单详情页面展示
                MaterialDetalis: {
                    dialog: false,
                    title: '',
                },
                //单条入库单数据详情
                InboundOrderDetalis: [],
            }
        },
        created() {
            this.formdata()
        },
        methods: {
            //表格数据序列号
            indexMethod(index) {
                return ((this.pagination.currentPage - 1) * this.pagination.pagesize) + index + 1
            },
            //初始化表格数据加载
            formdata() {
                let loadding = this.openLoading();
                this.$http.post('Device/GetInboundOrder', {
                    currentPage: this.pagination.currentPage,
                    pagesize: this.pagination.pagesize,
                    inboundOrder: this.inboundOrder,
                    from: this.selectfrom,
                }).then(res => {
                    loadding.close();
                    this.pagination.total = res.data.count
                    this.tableData = res.data.data
                }).catch(() => {
                    this.$message.error('服务器异常,请联系管理员!')
                })
            },
            //表格单个删除
            BatchDeleteOne_event(obj) {
                let loadding = this.openLoading();
                this.$http.get('Device/ValidateInboundOrderState?data=' + obj.InboundNumber).then(res => {
                    loadding.close();
                    if (!res.data.IsSuccess) {
                        this.$message.warning(res.data.Msg)
                        return false
                    } else {
                        this.$confirm('你确定要删除吗?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消'
                        }).then(() => {
                            this.SelectMore_lis.push(obj)
                            this.BatchDelete_event()
                        }).catch(() => {
                            return false
                        })
                    }
                })
            },
            //批量删除
            BatchDelete_event() {
                let idlis = []
                let delect_bool = true
                if (this.SelectMore_lis.length == 0) {
                    this.$message.warning('您还未选择需要删除的设备!')
                } else {
                    for (let i = 0; i < this.SelectMore_lis.length; i++) {
                        idlis.push(this.SelectMore_lis[i].Id)
                        if (this.SelectMore_lis[i].Amount > this.SelectMore_lis[i].StockAmount) {
                            this.$message.warning(this.SelectMore_lis[i].DeviceName + '存在未归还的物资，不能直接删除!')
                            delect_bool = false
                            break;
                        }
                    }
                    if (delect_bool) {
                        this.$confirm('你确定要删除吗?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'error'
                        }).then(() => {
                            let loadding = this.openLoading();
                            this.$http.post('Device/DeleteDeviceContent', idlis).then(res => {
                                loadding.close();
                                if (res.data.IsSuccess) {
                                    this.$message.success(res.data.Msg)
                                    this.formdata()
                                    this.SelectMore_lis = []
                                } else {
                                    this.$message.warning(res.data.Msg)
                                }
                            }).catch(() => {
                                this.$message.error('服务器异常,请联系管理员!')
                            })
                        }).catch(() => {
                            this.$message.info('已取消!')
                            this.SelectMore_lis = []
                        })
                    }
                }
            },
            //表格数据选择事件
            SelectionChange_event(value) {
                this.SelectMore_lis = value
            },
            //获取对应人员名字
            GetUserName(value) {
                let name = ''
                if (value != 0) {
                    for (let i = 0; i < this.$store.state.AllUsers.length; i++) {
                        if (this.$store.state.AllUsers[i].Id == value) {
                            name = this.$store.state.AllUsers[i].UserName
                            return name
                        }
                    }
                }
            },
            //入库单详情页面的数据绑定
            InboundMaterialDetalis_show_event(obj) {
                this.MaterialDetalis.dialog = true
                this.MaterialDetalis.title = obj.InboundNumber
                this.$http.get('Device/ViewInboundOrder?InboundNumber=' + obj.InboundNumber).then(res => {
                    this.InboundOrderDetalis = res.data
                })
            },
        }
    }
</script>

<style scoped>
    .big_box{
        padding: 10px;
    }
    .buttongroup{
        margin-right: 5px !important;
        border-radius: 4px !important;
    }
    .block{
        float: right;
    }
</style>
